<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Example</title>
    <!-- 引入 ECharts 库 -->
    <script src="../libs/echarts.min.js"></script>

</head>

<body>
    <!-- 创建一个用于存放图表的容器 -->
    <div style="background-color: blue;">
        <div id="main" style="width: 600px; height: 400px;"></div>

    </div>

    <script type="text/javascript">
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        var data1 = [0, 50, 7, 0];
        var data2 = [null, 30, null, null];
        var minValue = -5;
        var avgAll = 0;
        data1.forEach(e => {
            if (e) {
                avgAll += parseInt(e);
            }
        });
        minValue = avgAll / 10;
        // 指定图表的配置项和数据
        var option = {
            legend: {
                textStyle: {
                    color: '#fff' // 图例文字颜色
                },
                top: '1%', // 图例位置，距离顶部1%
                right: 'center', // 图例居中对齐
                orient: 'vertical', // 垂直布局
                height: '2%',
                itemGap: 5 // 设置图例项之间的间距
            },
            grid: {
                left: '10',
                top: '80',
                right: '30',
                bottom: '10',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 14
                    },
                    alignWithLabel:true
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgb(253,253,253)'
                    },
                    onZero: false, // 轴线是否在0上
                },
                data: ['H', 'A', 'B', 'C']
            },
            yAxis: [{
                type: 'value',
                axisTick: { show: false },
                splitNumber: 4,
                min: -minValue,
                axisLine: {
                    lineStyle: {
                        color: 'rgb(255,255,255)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 16
                    },
                    formatter: function (value) {
                        if (value == -minValue) {
                            return ''
                        } else {
                            return value;
                        }
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgb(255,255,255)',
                        type: 'dotted'
                    }
                }
            }],

            series: [

                {
                    name: '可控数量',
                    type: 'bar',
                    // stack: 'A', // A项点堆叠
                    barWidth: '40%',
                    data: data1,
                    barGap:'0%',
                    barCategoryGap:'0%', //分类柱子间无间隔
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        formatter: function (params) {
                            return params.value;
                        }
                    },
                    itemStyle: {
                        color: function (params) {
                            if (params.name == 'H') {
                                //H  : 大于0 时红色；==0 绿色  ；
                                if (params.data <= 0) {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(34,197,94,0.87)' },
                                        { offset: 1, color: 'rgba(54,141,72,0.11)' }
                                    ])
                                } else {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(227,15,65,0.78)' },
                                        { offset: 1, color: 'rgba(141,40,56,0.11)' }
                                    ])
                                }
                            } else if (params.name == 'A') {
                                // A： 堆叠的柱子   上面是红色（有问题）、下面的黄色（没问题）
                                if (params.data) {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(238,234,47,0.87)' },
                                        { offset: 1, color: 'rgba(34,119,88,0.1)' }
                                    ])
                                }

                            } else if (params.name == 'B') {
                                if (params.data <= 0) {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(34,197,94,0.87)' },
                                        { offset: 1, color: 'rgba(54,141,72,0.11)' }
                                    ])
                                } else {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(238,234,47,0.87)' },
                                        { offset: 1, color: 'rgba(34,119,88,0.1)' }
                                    ])
                                }
                            } else if (params.name == 'C') {
                                if (params.data <= 0) {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(34,197,94,0.87)' },
                                        { offset: 1, color: 'rgba(54,141,72,0.11)' }
                                    ])
                                } else {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(238,234,47,0.87)' },
                                        { offset: 1, color: 'rgba(34,119,88,0.1)' }
                                    ])
                                }
                            }


                        }
                    }
                },
                {
                    name: '不可控数量',
                    type: 'bar',
                    // stack: 'A', // A项点堆叠
                    barWidth: '40%',
                    data: data2,
                    barGap:'0%',
                    barCategoryGap:'0%', //分类柱子间无间隔
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        formatter: function (params) {
                            return params.value;
                        }
                    },
                    itemStyle: {
                        color: function (params) {
                            if (params.name == 'H') {
                                //H  : 大于0 时红色；==0 绿色  ；
                                if (params.data <= 0) {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(34,197,94,0.87)' },
                                        { offset: 1, color: 'rgba(54,141,72,0.11)' }
                                    ])
                                } else {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(227,15,65,0.78)' },
                                        { offset: 1, color: 'rgba(141,40,56,0.11)' }
                                    ])
                                }
                            } else if (params.name == 'A') {
                                // A： 堆叠的柱子   上面是红色（有问题）、下面的黄色（没问题）
                                if (params.data) {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                        { offset: 0, color: 'rgba(227,15,65,0.78)' },
                                        { offset: 1, color: 'rgba(141,40,56,0.11)' }
                                    ]);
                                }

                            } else if (params.name == 'B') {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                    { offset: 0, color: 'rgba(47,184,215,0.87)' },
                                    { offset: 1, color: 'rgba(34,119,88,0.1)' }
                                ])
                            } else if (params.name == 'C') {
                                return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                    { offset: 0, color: 'rgba(47,184,215,0.87)' },
                                    { offset: 1, color: 'rgba(34,119,88,0.1)' }
                                ])
                            }
                        }
                    }
                },


            ]

        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>